.progress {
  @apply -flex -h-5;
  background: var(--progress-bg);
  border-radius: var(--progress-radius);
}

.progress-bar {
  @apply -h-full -transition-[width] -duration-500;
  background: var(--progress-bar-color);
}

.progress-striped > .progress-bar {
  background-image: linear-gradient(45deg, rgba(var(--color-canvas-rgb), .15) 25%, transparent 25%, transparent 50%, rgba(var(--color-canvas-rgb), .15) 50%, rgba(var(--color-canvas-rgb), .15) 75%, transparent 75%, transparent);
  background-size: var(--progress-striped-size) var(--progress-striped-size);
}

.progress > .progress-bar:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.progress > .progress-bar:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.progress.active .progress-bar {
  animation: progress-bar-stripes 2s linear infinite;
}
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}
